---
title: Default Tokens | gluestack-ui

description: gluestack-ui v2 ships with default tokens that provide access to theme values and lets you build and customize your own themed components. 

pageTitle: Default Tokens

pageDescription: gluestack-ui v2 ships with default tokens that provide access to theme values and lets you build and customize your own themed components. 

showHeader: true
---

import { Canvas, Meta, Story } from '@storybook/addon-docs';
import {ColorPaletteComponent, ShadowComponent, FontSizeComponent, FontWeightComponent} from '../../../components/docs-components/DefaultComponent.tsx';

<Meta title="with-nativewind/Home/Theme Configuration/Default Tokens" />

Theming in `@gluestack-ui v2` is based on the [Styled System Theme Specification](https://github.com/system-ui/theme-specification).

## Colors

We recommend adding a palette that ranges from 50 to 900. Tools like [JSON Color Palette Generator](https://json-color-palette-generator.vercel.app), [Smart Swatch](https://smart-swatch.netlify.app/) or [Palx](https://palx.jxnblk.com/) are available to generate these palettes.

Below are the default color palette tokens provided in the gluestack-ui default config.

<ColorPaletteComponent />

To add custom color or update token. Please refer [tailwind CSS documentation](https://tailwindcss.com/docs/customizing-colors).

## Typography

To manage Typography options, update **theme** in `tailwind.config.js`.

To add or update **Font Family**. Please refer [Tailwind CSS documentation](https://tailwindcss.com/docs/font-family). We have also added a new family, '**roboto**', in our `tailwind.config.js`.

To add or update **font sizes**, please refer to the [Tailwind CSS documentation](https://tailwindcss.com/docs/font-size). We have added a new size, '**2xs**', in `tailwind.config.js` with a value of '**10px**'.

<FontSizeComponent/>

<br/>

To add or update **font weights**, please refer to the [Tailwind CSS documentation](https://tailwindcss.com/docs/font-weight).  We have added a new weight, '**extrablack**', in `tailwind.config.js` with a value of '**950**'.

<FontWeightComponent/>

<br/>

To add or update **line heights**. Please refer [Tailwind CSS documentation](https://tailwindcss.com/docs/line-height).

To add or update **letter spacing**. Please refer [Tailwind CSS documentation](https://tailwindcss.com/docs/letter-spacing).

## Breakpoints

**gluestack-ui** comes with default Tailwind CSS **breakpoints**. Please refer [this](https://tailwindcss.com/docs/responsive-design) link for customization.

## Spacing

**gluestack-ui** comes with default Tailwind CSS **spacing**. Please refer [this](https://tailwindcss.com/docs/customizing-spacing) link for customization.

## Radius

**gluestack-ui** comes with default Tailwind CSS **border-radius**. Please refer [this](https://tailwindcss.com/docs/border-radius) link for customization.

## Shadows

**gluestack-ui** comes with default Tailwind CSS Shadows and we provide two more types of shadows. 

<ShadowComponent />

<br/>
Please refer [this](https://tailwindcss.com/docs/customizing-spacing) link for customization.